<template>
	<view class="wrap">
		<u-card class="task-list-item" :show-head="false" :border="true" padding="36" margin="24rpx"
			:head-border-bottom="false">
			<view slot="body">
				<u-row gutter="0" style="gap:24rpx">
					<u-col span="12">
						<view class="apply-text"><span>设备巡检单号：</span>{{this.checkOrder}}</view>
					</u-col>
					<u-col span="12">
						<view class="apply-text"><span>巡检时间：</span>{{this.checkTime}}</view>
					</u-col>
					<u-col span="12">
						<view class="apply-text"><span>巡检人：</span>{{this.checkPerson}}</view>
					</u-col>

				</u-row>
			</view>
		</u-card>
		<view>
			<!-- 	<u-line color="black" :hair-line="false" /> -->
			<view>
				<text style="color: cornflowerblue;font-size: x-large; margin-left: 20rpx;">巡检结果</text>
			</view>
			<u-card v-for="item in orderFnialList" :key="item.id" class="task-list-item" :show-head="false"
				:border="true" padding="20" margin="20rpx" :head-border-bottom="false">
				<view class="resultBody" slot="body">
					<u-row gutter="16">
						<u-col span="12" class="rowBody">
							<view class="apply-text item">
								<span class="xmName">{{item.structure_name}}：</span>
							</view>
							<view class="contentss">
								<view class="apply-text item">
									<u-input @click="selectState(item.id)" v-if="item.status==3" class="inputValue"
										v-model="states[2].label" type="select" border />
									<u-input @click="selectState(item.id)" v-else-if="item.status==1" class="inputValue"
										v-model="states[0].label" type="select" border />
									<u-input @click="selectState(item.id)" v-else-if="item.status==2" class="inputValue"
										v-model="states[1].label" type="select" border />
									<u-input @click="selectState(item.id)" v-else-if="item.status==4" class="inputValue"
										v-model="states[3].label" type="select" border />
									
									<u-input @click="selectState(item.id)" placeholder="请选择" v-else-if="item.status==0" class="inputValue"
											 type="select" border />
									<u-select v-model="showStates" :list="states" @confirm="confirmState"
										></u-select>
								</view>
								<view class="apply-text item" style="padding-top: 40rpx;">
									<span class="xmName">备注：<u-input :input-style="inputStyle" placeholder="请输入"
											class="inputValue"
											style=" bottom: -10rpx;height: 72rpx; width: 654rpx; margin-left: -106rpx;"
											v-model="item.remark" type="text" border /></span>
								</view>
								<view class="apply-text item" style="padding-top: 125rpx;">
									<span class="xmName">设备编号：<u-input :input-style="inputStyle" disabled="disabled" placeholder="请输入"
											class="inputValue"
											style="bottom: -10rpx; height: 72rpx; width: 654rpx; margin-left: -106rpx;"
											v-model="item.sb_id" type="text" border /></span>
								</view>
								<view class="apply-text item" style="padding-top: 130rpx;">
									<span class="xmName">业务属性：<u-input :input-style="inputStyle" disabled="disabled" placeholder="请输入"
											class="inputValue"
											style="bottom: -10rpx; height: 72rpx; width: 654rpx; margin-left: -106rpx;"
											v-model="item.yewushuxing" type="text" border /></span>
								</view>
								
							</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
		</view>

		<view class="saveButton">
			<u-button :ripple="true" ripple-bg-color="#909399" @click="orderEdit()" size="medium"
				type="primary">保存</u-button>
		</view>

		<!-- <view v-show="false">{{nukkk}}</view> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				orderEquipInfo: null,
				orderId: null,
				orderInfo: null,
				orderResult: [],
				inputStyle: {
					lineHeight: '4rpx', // 设置文字高度
				},
				resultList: [],
				saveData: [],
				showStates: false,
				states: [{
						value: '1',
						label: '运行'
					},
					{
						value: '2',
						label: '停止'
					},
					{
						value: '3',
						label: '异常'
					},
					{
						value: '4',
						label: '维修维护'
					}

				],
				statuss: '',
				equipStatus: '',
				getId: null,
				checkOrder:"",
				checkTime:"",
				checkPerson:""
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.orderId = option.id;
			this.getGDDetail()
		},
		computed: {
			nukkk() {
				for (let i = 0; i < this.orderResult.length; i++) {
					this.resultList.push(this.orderResult[i].xjxmList)
				}
				this.resultList.forEach(item => {
					item.forEach(res => {
						this.saveData.push(res)
					})
				})
				return this.saveData
			},
			orderFnialList() {
				console.log(this.orderEquipInfo,"``````````````````````")
				if(this.orderResult && this.orderEquipInfo){
					for (let i = 0; i < this.orderResult.length; i++) {
						for (let j = 0; j < this.orderEquipInfo.length; j++) {
							if (this.orderResult[i].sb_id == this.orderEquipInfo[j].sb_id) {
								Object.assign(this.orderResult[i], this.orderEquipInfo[j])
							}
						}
					}
				}
				
				return this.orderResult
			}
		},

		methods: {
			//获取id，查询出工单详情
			getGDDetail() {
				this.$u.api.findSBXJGDDetail({
						"algorithmProcessId": "findOrder",
						"param": {
							"data": {
								"xjgdId": this.orderId
							}
						}
					})
					.then(res => {
						let orderInfos = res.data.data.result || [];
						this.orderResult = orderInfos[0].resList
						this.orderInfo = orderInfos[0]
						console.log("哦热", this.orderInfo)
						this.checkOrder = this.orderInfo.order_code;
						this.checkTime = this.orderInfo.inspection_time;
						this.checkPerson = this.orderInfo.nice_name;

					});
				//获取设备
				this.$u.api.findSBXJGDDetail1({
						"algorithmProcessId": "findSBByPlanId",
						"param": {
							"data": {
								"xjgdId": this.orderId
							}
						}
					})
					.then(res => {

						let orderInfos = res.data.data.result || [];

						//保留id，防止被覆盖
						for (let i = 0; i < orderInfos.length; i++) {
							orderInfos[i].yyyId = orderInfos[i].id
							delete orderInfos[i].id
						}
						this.orderEquipInfo = orderInfos
					});
			},
			//保存
			orderEdit() {
				let resultData = this.orderFnialList

				for (let j = 0; j < resultData.length; j++) {
					delete resultData[j].structure_name
					delete resultData[j].yyyId
					delete resultData[j].order_id
					resultData[j].resId = resultData[j].id
					delete resultData[j].id
					resultData[j].sbId = resultData[j].sb_id
					delete resultData[j].sb_id
				}
				console.log("resultData", resultData)


				this.$u.api.editSBXJGDDetail1({
						"algorithmProcessId": "updateOrder",
						"param": {
							"data": {
								"inspectorId": uni.getStorageSync('uuid'),
								"xjgdId": this.orderInfo.id,
								"resultList": resultData
							}
						}
					})
					.then(res => {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 1000
						})
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/sys/order/index",
							});
						}, 600);
					});
				// uni.navigateBack({
				// 	delta: 1
				// });
				// uni.navigateBack({
				//       delta: 1,
				//       success: () => {
				//         const pages = getCurrentPages();
				//         if (pages.length > 0) {
				//           const prevPage = pages[pages.length - 1];
				//           prevPage.searchOrderInfo(); // 调用上一页的刷新方法
				//         }
				//       }
				//     });
			},
			confirmState(e) {
				e.map((val, index) => {
					this.statuss = val.label;
					this.equipStatus = val.value;
					const item = this.orderFnialList.find(item => item.id == this.getId);
					item.status = val.value;
				})
			},
			//选择状态
			selectState(id) {
				console.log("``````````````,",id)
				this.getId = id;
				this.showStates = true;
			},
			// handleChange(val) {}
		},
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.wrap .search {
		background: #ffffff;
	}

	.uni-title {
		font-size: 30rpx;
		color: #333333;
		padding: 10px;
		background: #fff;
		border-top: 1px solid #ededed;
		margin-top: 20rpx;
	}

	.uni-media-list {
		padding: 15px 15px;

	}

	.uni-media-list-body {
		height: 42px;
		padding-left: 20rpx;
	}

	.uni-media-list-text-top {
		height: 40rpx;
		overflow: hidden;
		width: 100%;
		line-height: 40rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.uni-media-list-text-bottom {
		width: 100%;
		line-height: 24rpx;
		font-size: 26rpx;
		color: #666666;

		span {
			margin-right: 10rpx;
		}
	}


	.head-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		padding: 30rpx 0;
		margin-left: 24rpx;
	}



	.grid {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;

		.grid-text {
			font-size: 28rpx;
			margin-top: 28rpx;
			color: $u-type-info;
			// color: #333;
			font-weight: bold;
		}

	}

	.charts-box {
		width: 100%;
		height: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;
		height: 50rpx;

		span {
			color: #999999;
		}
	}


	.apply-list-foot {
		font-size: 28rpx;
	}


	.searchButton {
		height: 50rpx;
	}

	.selectCondition {

		.search {
			display: inline-block;
			width: 300rpx;

		}

		.selectItem {
			display: contents;
		}

	}

	.wrap .navProgramm {
		white-space: nowrap;

		.item {
			width: 50%;
			height: 220rpx;
			display: inline-block;
			margin-right: 10rpx;
		}
	}

	.rowBody {
		// display: flex;
		// justify-content: space-between;

		.item {
			flex: 1;
			// text-align: center;
		}

		.contentss {
			display: block;
			height: 480rpx;
		}
	}

	input.uni-input-input {
		bottom: 16rpx;
	}

	.xmName {
		position: relative;
		display: block;

		.inputValue {
			width: 84%;
			left: 16%;
			bottom: 38rpx;
			height: 54rpx;

			input {
				bottom: 16rpx;
			}

		}


	}

	.saveButton {
		text-align: center;
	}
	.task-list-item {
			box-shadow:
				-4rpx -4rpx 6rpx rgba(0, 0, 0, 0.1) !important;
		}
</style>